<template>
  <Component ref="refComponent" :is="component" :field="field"/>
</template>

<script setup>
import SearchComponent from '@/components/form/SearchComponent';
import {defineProps, shallowRef, watchEffect} from 'vue';
import {DefaultFieldDefinition} from '@/components/form/DefaultFormDefinition';
import {isNotEmpty} from '@/utils/CommonUtils';

const component = shallowRef();
const refComponent = shallowRef();
const props = defineProps({
  field: {
    type: Object,
    default() {
      return DefaultFieldDefinition;
    }
  },
  component: {
    type: String,
    default: undefined,
  }
});

function resetField() {
  refComponent.value.resetField();
}

function getSearchFieldValue(searchData) {
  return refComponent.value.getSearchFieldValue(searchData);
}

watchEffect(() => {
  if (isNotEmpty(props.component)
    && isNotEmpty(SearchComponent[props.component])) {
    component.value = SearchComponent[props.component];
  } else {
    component.value = undefined;
  }
});

defineExpose({
  getSearchFieldValue,
  resetField
});
</script>
